import React from 'react'
import ima from '../assets/images/orange.png'
import '../assets/css/login.css'
import { register } from '../request/api'
class Home extends React.Component {
    constructor() {
        super()
        this.state = {
            registerForm: {
                phone: '',
                password: '',
                nickname:''
            }
        }
    }
    changeLogin(type, e) {
        this.setState({
            registerForm: {
                ...this.state.registerForm,
                [type]: e.target.value
            }
        })
    }
    register() {
        if(this.state.registerForm.password==''&&this.state.registerForm.phone==''){
            alert('用户名或密码不能为空！')
            return
        }
        register(this.state.registerForm).then((res) => {
            
            if (res.data.code == 200) {
                this.props.history.push('/')
            } else {
                alert(res.data.msg)
            }
        })
    }

    render() {
        return (<div>
            <div className='denglu_top'>
                <span className="zt1">手机注册</span>
            </div>
            <div className="cvmain">
                <img src={ima} alt="" />
                <p>
                    <span>昵称：</span>
                    <input className='inp0'
                        onChange={this.changeLogin.bind(this, 'nickname')}
                        type="text" placeholder='请输入昵称' />
                </p>
                <p>
                    <span>手机号：</span>
                    <input className='inp'
                        onChange={this.changeLogin.bind(this, 'phone')}
                        type="text" placeholder='请输入手机号' />
                </p>
                <p>
                    <span>密码：</span>
                    <input className='inp1'
                        onChange={this.changeLogin.bind(this, 'password')}
                        type="text" placeholder='请输入密码' />
                </p>

                <button onClick={this.register.bind(this)}>注册</button>
            </div>
        </div>)
    }
}
export default Home